<template>
  <el-dialog
    class="tradeDetailDialog"
    title="每月数据交易详情"
    :visible.sync="hidden"
    width="1350px"
    top="50px"
    :before-close="() => $emit(`update:hidden`, false)"
    @open="open"
  >
    <div class="trade" v-loading="loading">
      <div class="total">
        <div class="totle_money">
          交易总金额：
          <b class="text-danger">￥{{tradeData.real_money}}</b>
        </div>
        <div class="totle_num">
          收款总笔数：
          <b class="text-danger">{{tradeData.real_num}}</b>
        </div>
      </div>
      <div class="total1 total">
        <div class="totle_money">
          交易总金额：
          <b class="text-danger">￥{{realMoney}}</b>
        </div>
        <div class="totle_num">
          收款总笔数：
          <b class="text-danger">{{realNum}}</b>
        </div>
        <div class="totle_rate">
          手续费：
          <b class="text-primary">￥{{rateMoney}}</b>
        </div>
        <div class="tips" v-if="tradeData.real_money != realMoney">（不一致）</div>
      </div>
      <div class="icoList">
        <div class="icoItem">
          <img src="./images/calendarIco1.png" />交易总额
        </div>
        <div class="icoItem">
          <img src="./images/calendarIco2.png" />手续费
        </div>
        <div class="icoItem">
          <img src="./images/calendarIco3.png" />交易笔数
        </div>
      </div>
      <div class="btnRight">
        <el-button
          type="success"
          size="mini"
          class="refreshBtn"
          @click="update"
          :loading="btn_loading"
          v-if="tradeData.real_money != realMoney"
        >同步清分记录</el-button>
      </div>
      <el-calendar v-model="tradeDate">
        <template slot="dateCell" slot-scope="{ date, data }">
          <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''">
            <div class="calendar-day">
              {{
              data.day
              .split('-')
              .slice(2)
              .join('-')
              }}
            </div>
            <div v-for="(item, index) in formatSchedule(data)" :key="index" class="tradeDate">
              <div class="trade_money">
                <b class="text-danger">￥{{item.trade_money}}</b>
              </div>
              <!-- <div>
                <span>结算总额：</span>
                <b class="text-danger">￥{{item.settlement_money}}</b>
              </div>-->
              <div
                class="trade_rate_money"
                v-show="rateMoney > 0 && item.trade_rate_money == 0 ? false:true"
              >
                <!-- <span>手续费：</span> -->
                <img src="./images/calendarIco4.png" />
                <b class="text-primary">￥{{item.trade_rate_money}}</b>
              </div>
              <div class="num">{{item.trade_num}}</div>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "tradeDetailDialog",
  props: {
    hidden: {
      default: false,
      type: Boolean
    },
    stat_date: "",
    merchant_id: "",
    trade_id: ""
  },
  data() {
    return {
      tradeDate: new Date(), //日期控件显示的月份
      tradeData: {
        schedule: []
      }, //每月数据交易数据
      loading: false,
      realMoney: 0, //交易总金额-前端统计
      realNum: 0, //收款总笔数-前端统计
      rateMoney: 0, //手续费-前端统计
      btn_loading: false //同步清分记录按钮-加载中
    };
  },
  watch: {
    currentDate(nVal) {
      this.tradeData.schedule = []; // 后台返回的数据
      this.initList();
    }
  },
  computed: {
    formatSchedule() {
      console.log("this.tradeData.schedule", this.tradeData.schedule);
      return data => {
        return this.tradeData.schedule.filter(ele => {
          let time = ele.trade_date;
          return time == data.day; // 日历的时间是否和返回数据里的数据一样,返回的是布尔值
        });
      };
    }
  },
  mounted() {},
  methods: {
    open() {
      this.tradeDate = this.stat_date;
      this.initList();
    },
    update() {
      this.btn_loading = true;
      this.$message.warning("清分记录的同步速度会比较慢，请您耐心等待。");
      this.$axios
        .post(`/admin/synchronous_distribution_settlement/`, {
          merchant_id: this.merchant_id
        })
        .then(res => {
          this.$message.success("清分记录同步成功！");
          this.initList();
        })
        .catch(err => {
          if (err.response) {
            this.$message.error(
              err.response.data.error || err.response.data.detail
            );
          } else {
            this.$message.error("抱歉，网络抖动，请稍后再试！");
          }
        })
        .finally(() => {
          this.btn_loading = false;
        });
    },
    initList() {
      this.loading = true;
      this.$axios
        .get(`/admin/distribution_settlement/`, {
          params: {
            merchant_id: this.merchant_id,
            trade_id: this.trade_id
          }
        })
        .then(res => {
          this.tradeData = res.tradeData;
          //交易总金额
          let real_money = 0;
          for (let i = 0; i < res.tradeData.schedule.length; i++) {
            real_money += Number(res.tradeData.schedule[i].trade_money);
          }
          this.realMoney = real_money.toFixed(2);
          console.log("交易总金额-real_money", real_money);

          //收款总笔数
          let real_num = 0;
          for (let i = 0; i < res.tradeData.schedule.length; i++) {
            real_num += Number(res.tradeData.schedule[i].trade_num);
          }
          this.realNum = real_num;
          console.log("收款总笔数-real_num", real_num);

          //手续费
          let rate_money = 0;
          for (let i = 0; i < res.tradeData.schedule.length; i++) {
            rate_money += Number(res.tradeData.schedule[i].trade_rate_money);
          }
          this.rateMoney = rate_money.toFixed(2);
          console.log("手续费-rate_money", rate_money);
        })
        .catch(err => {
          if (err.response) {
            this.$message.error(
              err.response.data.error || err.response.data.detail
            );
          } else {
            this.$message.error("数据加载失败！");
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }
  },
  created() {}
};
</script>
<style scoped lang="scss">
.tradeDetailDialog /deep/ .el-dialog__body {
  padding: 10px 20px;
}
.tradeDetailDialog /deep/ .el-calendar__title {
  font-size: 16px;
}
.tradeDetailDialog /deep/ .el-button-group {
  display: none;
}
.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.trade {
  position: relative;
  height: 735px;
}
.icoList {
  display: flex;
  position: absolute;
  top: 40px;
  right: 0;
  height: 17px;
  align-items: center;
  .icoItem {
    margin-left: 20px;
    display: flex;
    height: 17px;
    font-size: 14px;
    img {
      margin-right: 5px;
    }
  }
}
.btnRight {
  position: absolute;
  top: 0px;
  right: 0;
  margin-top: -8px;
}
.total {
  display: flex;
  position: absolute;
  top: 40px;
  left: 0;
  > div {
    font-size: 16px;
    color: #181818;
    margin-right: 60px;
  }
}
.total1 {
  top: 70px;
  .tips {
    color: #f56c6c;
    font-weight: bold;
  }
}
.trade /deep/ .el-calendar__header {
  padding: 12px 20px 70px 0;
}
.trade /deep/ .el-calendar-table .el-calendar-day {
  height: 90px;
}
.tradeDate {
  font-size: 14px;
  position: relative;
  margin-left: 20px;
  height: 60px;
  text-align: center;
  .trade_money {
    margin-top: 5px;
    b {
      font-size: 18px;
    }
  }
  .trade_rate_money {
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      margin-right: 13px;
      width: 13px;
    }
  }
  > div {
    margin-bottom: 5px;
    span {
      width: 70px;
      text-align: right;
      display: inline-block;
    }
    b {
      margin-left: -10px;
    }
  }
  .num {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #409eff;
    border-radius: 5px 0px 0px 0px;
    display: inline-block;
    padding: 0px 6px;
    color: #fff;
    font-size: 12px;
    height: 19px;
    line-height: 19px;
    margin-bottom: -1px;
    margin-right: -8px;
  }
}
</style>

